<template lang="pug">
  div.sorts-list(v-if="totalList.length")
    //- 查询工具栏
    app-search-toolbar
    //- 分类导航
    .category-list(ref='tabWrapper')
        ul(:style="{width: (totalList.length * 80) + 'px'}")
          li(v-for="(item, index) in totalList",:key="index",@click="currentTotalIndex = index",:class="{current: index === currentTotalIndex}") {{item.title}} 
    //- 过滤菜单
    .filter-toolbar
      dl(v-for="(item, index) in filterItems",:key="index")
        dt {{item.title}}:
        dd.val(@click='$set(filterItems[index], "visible", true)')
          | {{filterItems[index]['current_title'] || '全部'}}
        dd &nbsp;
    .main-panel
      //- 左侧菜单
      .menu-wrapper(ref='menuWrapper')
        ul
          li.menu-item(v-for='(item, index) in categoryList', :key='index', @click='currentCategoryIndex = index', :class="{'current': index === currentCategoryIndex }")
            span.text
              | {{item.title}}
      //- 右侧商品
      .product-wrapper(ref='productWrapper')
        ul
          li(v-show="visibleItem(product)", v-for='(product, index) in productList', :key='index')
            app-product(:model="product",@plus="buyProductHandler")
    //- 过滤器弹层
    mt-popup.filter-box(v-for="(item, index) in filterItems",:key="index",v-model="item.visible", popup-transition='popup-fade')
      ul
        li(v-for="(fitem, findex) in item.value",:key="findex",@click="$set(filterItems[index], 'current', fitem.id);$set(filterItems[index], 'current_title', fitem.title);$set(filterItems[index], 'visible', false);_initScroll()") {{fitem.title}}
    app-buy-option(:model="currentProduct",:activityId="parseInt(0)",@close="buyOptionCloseHandler",style="bottom: -1.2rem")
</template>

<script>
import { Popup } from 'mint-ui'
import BScroll from 'better-scroll'
import Product from './Product'
import BuyOption from './BuyOption'
import SerachToolbar from './SerachToolbar'
import { mapGetters } from 'vuex'

export default {
  components: {
    'mt-popup': Popup,
    'app-product': Product,
    'app-search-toolbar': SerachToolbar,
    'app-buy-option': BuyOption
  },
  computed: {
    ...mapGetters({
      products: 'getProducts'
    })
  },
  data () {
    return {
      totalList: [], // 产品总集
      filterItems: [], // 过滤项
      categoryList: [], // 当前产品列表
      productList: [], // 当前产品列表
      tabScroll: null, // tab滚动面板
      menuScroll: null, // 菜单滚动面板
      productScroll: null, // 产品滚动面板
      currentTotalIndex: -1,
      currentCategoryIndex: -1,
      currentProduct: null
    }
  },
  watch: {
    products: {
      handler: function (val, oldval) {
        this.totalList = JSON.parse(JSON.stringify(val))
        this.currentTotalIndex = 0
        this.currentCategoryIndex = 0
      },
      immediate: true,
      deep: true
    },
    currentTotalIndex: {
      handler: async function (val, oldval) {
        if (this.totalList[val]) {
          this.categoryList = this.totalList[val].childs || []
          this.filterItems = this.categoryList[0] ? this.categoryList[0]['filters'] : []
          this.productList = this.categoryList[0] ? this.categoryList[0]['product'] : []
          this.currentCategoryIndex = 0
        }
      },
      immediate: true
    },
    currentCategoryIndex: {
      handler: async function (val, oldval) {
        this.filterItems = this.categoryList[val] ? this.categoryList[val]['filters'] : []
        this.productList = this.categoryList[val] ? this.categoryList[val]['product'] : []
        this._initScroll()
      },
      immediate: true
    }
  },
  methods: {
    _initScroll () {
      if (!this.menuScroll || !this.productScroll) {
        this.$nextTick(() => {
          this.tabScroll = new BScroll(this.$refs.tabWrapper, {
            probeType: 1,
            click: true,
            scrollY: false,
            scrollX: true
          })
          this.menuScroll = new BScroll(this.$refs.menuWrapper, {
            click: true,
            scrollbar: {
              fade: true,
              interactive: false
            }
          })
          this.productScroll = new BScroll(this.$refs.productWrapper, {
            click: true,
            scrollbar: {
              fade: true,
              interactive: false
            }
          })
        })
      } else {
        this.tabScroll.refresh()
        this.tabScroll.scrollTo(0, 0, 0)
        this.menuScroll.refresh()
        this.menuScroll.scrollTo(0, 0, 0)
        this.productScroll.refresh()
        this.productScroll.scrollTo(0, 0, 0)
      }
    },
    visibleItem (item) {
      for (let label in this.filterItems) {
        if (this.filterItems[label].current > 0 && parseInt(item[label + '_id']) !== parseInt(this.filterItems[label].current)) {
          return false
        }
      }
      return true
    },
    buyProductHandler (model) {
      this.currentProduct = model
    },
    buyOptionCloseHandler () {
      this.currentProduct = null
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "../assets/mixin.styl"
.sorts-list
  display: block
  position: relative
  width: 100%
  height: 100%
  /*导航样式*/
  .category-list
    border-bottom: 1px solid #ccc
    height: 0.8rem
    width: 100%
    overflow: hidden
    font-size: .25rem
    background: #f3f5f7
    ul
      display: flex
      flex-direction: row
      height: 100%
      li
        border-right: 1px solid #ccc
        padding: 0.16rem 0.5rem
        box-sizing: border-box
        cursor: pointer
        line-height: 0.5rem
        &.current
          background: #fff
          font-weight: bold
        &:last-child
          border-right: none
  .search-toolbar
    padding: 0.1rem 0.2rem
  /*过滤条*/
  .filter-toolbar
    position: absolute
    left: 2rem
    right: 0
    z-index: 6
    clear: both
    height: 0.8rem
    font-size: .35rem
    color: #666
    border-bottom: 1px solid #fefefe
    background: #f3f4f7
    overflow: hidden
    dl
      float: right
    dt,dd.val
      float: left
      padding: .2rem
      height: 100%
      box-sizing: border-box
    dd.val
      background: #e9ebf1
      font-size: .34rem
      color: #000
      cursor: pointer
  .filter-box
    padding: 0.2rem 0.3rem
    border-radius: .1rem
    max-width: 100%
    width: 95%;
    position: absolute;
    li
      cursor: pointer
      padding: .2rem
      float: left
      margin: .1rem
      background: rgba(255, 0, 0, 0.07)
      border-radius: .2rem
      font-size: .3rem
  /*主面板*/
  .main-panel
    width: 100%
    float: left
    clear: both
    position: absolute
    left: 0
    bottom: 0
    top: 1.7rem
  .menu-wrapper
    width: 2rem
    background: #f3f5f7
    overflow: hidden
    position: absolute
    left: 0
    top: 0
    bottom: 0
    overflow: hidden
    .menu-item
      display: table
      height: 1rem
      line-height: 1rem
      padding: 0 .2rem
      cursor: pointer
      width: 100%
      .text
        display: table-cell
        width: 100%
        vertical-align: middle
        font-size: .25rem
        text-align: center
        border-1px(rgba(7, 17, 27, 0.1))
      &.current
        position: relative
        z-index: 10
        margin-top: -1px
        background: #fff
        font-weight: 700
        border-right: .03rem solid #f3f5f7
        box-sizing: border-box
        width: 100%
        .text
          border-none()
  .product-wrapper
    position: absolute
    left: 2rem
    top: 0.8rem
    right: 0
    bottom: 0
    overflow: hidden
</style>
